{extend name="property/public/insidePageBase" /}
{block name="title"}添加同住人员信息{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            {if ($contractId <= 0)}
            <div class="layui-row">
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">物业筛选</label>
                        <div class="layui-input-block">
                            <select name="property_id" id="property_id" lay-search lay-filter="property_id">
                                <option value="">--请选择--</option>
                                {foreach $propertyData as $k=>$v}
                                <option value="{$v['id']}">{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs7">
                    <div class="layui-input-group" id="contract_id_show" style="width: 100%;">
                        <input type="text" name="contract_id" placeholder="请选择房间" disabled  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            {/if}
            <div class="layui-row">
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">住户姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" autocomplete="off" placeholder="请输入住户姓名" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs7">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" name="mobile" autocomplete="off" placeholder="请输入联系方式" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">证件类型</label>
                        <div class="layui-input-block">
                            <select name="is_type"  lay-search>
                                <option value="">--请选择--</option>
                                <option value="1">身份证</option>
                                <option value="2">护照</option>
                                <option value="3">港澳通行证</option>
                                <option value="4">回乡证</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs7">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">证件号码</label>
                        <div class="layui-input-block">
                            <input type="text" name="number"  autocomplete="off" placeholder="请输入证件号码" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">证件正面照</label>
                <div class="layui-input-inline">
                    <input type="text" name="front_file" placeholder="请上传证件正面照" id="front_file" class="layui-input">
                </div>
                <img class="checkPictureByImg front_file" style="width: 40px;height: 40px;">
                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                    <button type="button" class="layui-btn layui-btn-primary uploadImg" lay-data="{field: 'front_file',data:{dir:'contract/lessee', field:'front_file'}}">
                        <i class="layui-icon">&#xe67c;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">证件反面照</label>
                <div class="layui-input-inline">
                    <input type="text" name="back_file" placeholder="请上传证件反面照" id="back_file" class="layui-input">
                </div>
                <img class="checkPictureByImg back_file" style="width: 40px;height: 40px;">
                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                    <button type="button" class="layui-btn layui-btn-primary uploadImg" lay-data="{field: 'back_file',data:{dir:'contract/lessee', field:'back_file'}}">
                        <i class="layui-icon">&#xe67c;</i>
                    </button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="contract_id_tpl" type="text/html">
    <select name="contract_id" lay-filter="contract_id" id="contract_id">
        <option value="">--请选择房间--</option>
        {{# layui.each(d.roomList, function(index, elem) { }}
        <option value="{{elem.contract_id}}">{{elem.full_room_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laytpl = layui.laytpl;
        $('.uploadImg').selectImages({
            confirm:function(res,elem,data) {
                $('#' + data.field).val(res[0].src);
                $('.' + data.field).attr('src',res[0].src)
            }
        });
        form.on('select(property_id)', function(res) {
            let value = res.value
            loadPropertyUnitList(value)
        })
        function loadPropertyUnitList(propertyId) {
            $.get('{:request()->url()}', {property_id:propertyId,get_type:'roomData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('contract_id_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('contract_id_show'); // 视图对象
                    laytpl(getTpl).render({roomList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }
            })
        }
    });
</script>
{/block}